<template>
    <div class="common-layout">
     <el-container>
       <el-header>
         <div class="logoIcon"><img src="/logo.png" alt=""></div>
         <div class="login-user">
           <div class="user">用户{{CurrentUser}}</div>
           <a @click="backtoHome" class="userBack">退出</a>
         </div>
       </el-header>
         <el-container>
         <el-aside width="200px">
           <h4>System Admin</h4>
           <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" v-loading="loading"/>
         </el-aside>
         <el-main>
          <router-view v-slot="{Component}">
            <component :is="Component" :key="NumDataGroup"></component>
          </router-view> 
         </el-main>
          </el-container>
     </el-container>
   </div>
 </template>
 
 <script setup>
 import {getCurrentInstance,ref,} from "vue";

 const { proxy } = getCurrentInstance();

 const CurrentUser = JSON.parse(window.sessionStorage.getItem("jsonArrayUserGroup"))[0].NumUserGroup;
 const loading = ref(true)
 const NumDataGroup=ref(0);//通过栏目号区分渲染哪一个页面
 const data=ref([]);
 const defaultProps= {
  children: 'ListChild',
  label: 'ShowText',
 }

// //请求菜单数据 DataGroupList
// const promiseReqGroupList=proxy.$HelperAxios.get('/DataAccessWithGroup/QueryDataGroup',{params:{CurrentUserGroup:CurrentUser.value}})
proxy.$HelperAxios.get('/DataAccessWithGroup/QueryDataGroup',{params:{}}).then((Request)=>{
  if (Request.status === 200) {
    if (Request.data.MsgType === "success") {
      loading.value=false;
      data.value=Request.data.Payload;
    }else{alert('请求错误')}
  }else{alert('请求错误')}
 })

//路由跳转
function handleNodeClick(dataIn){
  if(proxy.$HelperCore.boolFuncJsonExistChk(dataIn.JO01LC030,'HomeSystemMgt')){
    if(dataIn.NV04AP040[2]===2){
      window.sessionStorage.setItem('CurrentDataGroup',JSON.stringify(dataIn.NumDataGroup))
      const strURL=dataIn.JO01LC030.HomeSystemMgt.URL;
      NumDataGroup.value=dataIn.NumDataGroup;
      proxy.$router.push({path:strURL,query:{NumDataGroup:dataIn.NumDataGroup}});
    }else{
      ElMessage({
       message: 'Authorization is required for viewing',
       type: 'info',
     })
      window.sessionStorage.removeItem('CurrentDataGroup');
      proxy.$router.push({path:'/LayoutViewSystemMgt'})
    }
  }
  else{
    proxy.$router.push({path:'/LayoutViewSystemMgt'})
  } 
}

//点击退出后台
function backtoHome(){
  proxy.$router.push({path:'/'});
  window.localStorage.removeItem('AccessToken');
  window.sessionStorage.removeItem('jsonArrayUserGroup');
  window.sessionStorage.removeItem('CurrentDataGroup');
 }
 </script>
 
 <style>
 *{
   margin: 0;
   padding: 0;
   list-style: none;
   box-sizing: border-box;
   text-decoration: none;
   font-size: 16px;
 }
 .example-showcase .el-loading-mask {
  z-index: 9;
}
 a,button{
  cursor: pointer;
 }
 a{
  color: #806300;
}
a:hover{
  color: #007ccc;
}
 .el-header{
   box-shadow: 0 2px 3px rgba(0,0,0,0.3);
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 50px;
   z-index: 1;
 }
 .logoIcon,.logoIcon img{
   height: 40px;
 }
 .login-user{
   display: flex;
   align-items: center;
 }
 .el-aside{
  width: 15%;
   min-height: 100vh;
   text-align: center;
   background-color: #eaedf2;
 }
 .el-tree-node__label{
  font-size: 16px;
 }
 .el-aside>h4{
   padding: 20px 0;
 }
 .el-tree{
   background: #eaedf2 !important;
 }
 .el-tree-node__content{
   padding: 26px 0px;
 }
 .el-tree-node__content:hover{
   background: #ffffff !important;
 }
 .el-main{
   padding: 0 !important;
   /* min-height: 100vh; */
 }
 .userBack{
 margin-left: 20px;
 background-color:transparent ;
 border: 0;
 color: #806300;
 }
 </style>
 
 